<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { userLoginService } from '@/api/user/user.js'
import {useRouter} from "vue-router"
import { useMessage} from 'naive-ui'
import md5 from 'js-md5'
// 登录表单
const loginForm = ref({
  jobNumber: "",
  password: "",
  remember:false,
})
//用于传递
const userStore = useUserStore()
const router = useRouter()
const message=useMessage()
//点击提交按钮
const submit = async(event) => {
  //阻止默认表单提交
  event.preventDefault()
  // 对密码进行加密
  const encryptedPassword = md5(loginForm.value.password);
  let jobNumber = loginForm.value.jobNumber
  // 将加密后的密码设置回表单对象
  let password = encryptedPassword;
  const { data: res } = await userLoginService({jobNumber,password})
  console.log("res")
  console.log(res)
  if(res.code === 1) {
    userStore.setToken(res.data.token)
    userStore.setRoleId(res.data.roleId)
    userStore.setName(res.data.name)
    userStore.setJobNumber(res.data.jobNumber)
    if(userStore.roleId === 1) {
      message.success("登录成功！")
      router.push('/teacher-home')
    }
    else if(userStore.roleId === 2 || userStore.roleId === 3) {
      message.success("登录成功！")
      router.push('/secretary-home')
    }
  }
  else if(res.code === 0) {
    message.error("工号或密码错误")
  }
}
</script>

<template>
  <div class="container">
    <div class="loginForm">
      <div class="title">登录</div>
      <form>
        <label for="username">工号</label>
        <input type="text" placeholder="请输入工号" id="username" v-model="loginForm.jobNumber">
        <label for="password">密码</label>
        <input type="password" placeholder="请输入密码" id="password" v-model="loginForm.password">
        <button @click="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/login.webp');
  background-size: cover;
}
.loginForm{
  width: 450px;
  min-height: 400px;
  background-color:white;
  border-radius: 5px;
}
.title{
  margin-top: 5px;
  text-align: center;
  font-size: 35px;
}
form{
  width: auto;
  padding: 0 30px;
  box-sizing:border-box;
}
label {
  display: block;
  margin-top: 30px;
  font-size: 16px;
}
input {
  display: block;
  height: 45px;
  width: 100%;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  box-sizing:border-box;
  border: 1px solid rgb(218, 210, 210);
}
button {
  margin-top: 30px;
  width: 100%;
  color: white;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  background-color: rgb(17, 138, 236);
  border: 0;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.alink {
  text-align: right;
  color: inherit;
  transition: all 0.3s;
  text-decoration: none;
  color: grey;
}
.alink:hover{
  /* 当鼠标悬停时 */
  color: #007bff;
  /* text-decoration: underline;  */
}
.verify,
.login-code {
  display: inline-block;
  height: 45px;
  border-radius: 5px;
  padding: 0 10px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 300;
  box-sizing: border-box;
  vertical-align: top;
}

.verify {
  width: 50%;
  border: 1px solid rgb(218, 210, 210);
}
.login-code {
  height: 60px;
  margin-left: 60px;
}
</style>
